<template>
	<view class="first">
		<!-- <view class="search">
			<image class="searchImg" src="https://img.wilmer.com.cn/admin/2024/6-9/%E6%90%9C%E7%B4%A201.png" mode="">
			</image>
			<up-input placeholder="Search" border='none' v-model="value" :fontSize="20"></up-input>
			<image class="backgp" src="https://img.wilmer.com.cn/admin/2024/6-9/%E7%BC%96%E7%BB%84%2020%402x.png"
				mode=""></image>
		</view> -->
		<view class="user" @click="onclick()">
			<view class="line">
				<image class="headImg" src="https://nikeshang.oss-cn-hangzhou.aliyuncs.com/324a0933080712b4/92223a9bb4a22466.png" mode="">
				</image>
				<text>Evan Yates</text>
				<image class="downImg"
					src="https://img.wilmer.com.cn/admin/2024/6-9/icn%EF%BC%8Fgeneral%EF%BC%8Farrow%EF%BC%8Fdark%EF%BC%8Fright%402x.png"
					mode=""></image>
			</view>
			<view class="ExitLogin" v-if="state" @click.stop='onQuit()'>
				<image src="https://img.wilmer.com.cn/admin/2024/6-9/%E7%BC%96%E7%BB%84%208%402x.png" mode=""></image>
				<text>退出登录</text>
			</view>
		</view>
	</view>
	<!-- 遮挡层 -->
	<view class="Occlusion" v-if="state" @click="onclick(item)"></view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const value = ref('')
	const state = ref(false)

	function onclick() {
		state.value = !state.value
	}

	function onQuit() {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.first {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		margin: 30px 16px 40px;
		height: 80px;

		.search {
			width: 650px;
			height: 80px;
			background: #FFFFFF;
			border-radius: 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.searchImg {
				width: 36px;
				height: 36px;
				margin-left: 24px;
				margin-right: 30px;
			}

			.backgp {
				width: 178px;
				height: 65px;
				margin-right: 32px;
			}
		}

		.user {
			padding: 15px 14px;
			width: 303px;
			background: #FFFFFF;
			box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
			border-radius: 14px;

			display: flex;
			flex-direction: column;
			justify-content: center;

			position: absolute;
			z-index: 999;

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.headImg {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-left: 24px;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #040404;
					line-height: 24px;
				}

				.downImg {
					width: 40px;
					height: 40px;
					margin-right: 20px;
				}
			}

			.ExitLogin {
				margin-top: 40px;
				display: flex;

				image {
					width: 32px;
					height: 32px;
					margin-left: 33px;
					margin-right: 25px;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #787774;
					line-height: 33px;
					text-align: left;
				}
			}
		}
	}

	.Occlusion {
		width: 100vw;
		height: 100vh;
		background: #000000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
</style>